<template>
  <div @click="click">
    <SvgIcon v-if="isFullScreen" size="24" name="exit-fullscreen" />
    <SvgIcon v-else size="24" name="fullscreen" />
  </div>
</template>
<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
import { ElMessage } from 'element-plus';
import ScreenFull from 'screenfull'
import { onBeforeUnmount, onMounted, ref } from 'vue';

const isFullScreen = ref(false)

const change = () => {
  isFullScreen.value = ScreenFull.isFullscreen
}

const init = () => {
  if (ScreenFull.isEnabled) {
    ScreenFull.on('change', change)
  }
}

const destory = () => {
  if (ScreenFull.isEnabled) {
    ScreenFull.off('change', change)
  }
}

const click = () => {
  if (!ScreenFull.isEnabled) {
    ElMessage.warning('你的浏览器不支持！')
  }
  console.log(ScreenFull.isFullscreen)
  ScreenFull.toggle()
}


onMounted(() => {
  init()
})

onBeforeUnmount(() => {
  destory()
})
</script>